import dash
import pandas as pd
import feffery_antd_charts as fact
from dash import html

app = dash.Dash(__name__)

column_demo_data = [
    {
        "year": "1991",
        "value": 3,
        "type": "Lon"
    },
    {
        "year": "1992",
        "value": 4,
        "type": "Lon"
    },
    {
        "year": "1993",
        "value": 3.5,
        "type": "Lon"
    },
    {
        "year": "1994",
        "value": 5,
        "type": "Lon"
    },
    {
        "year": "1995",
        "value": 4.9,
        "type": "Lon"
    },
    {
        "year": "1996",
        "value": 6,
        "type": "Lon"
    },
    {
        "year": "1997",
        "value": 7,
        "type": "Lon"
    },
    {
        "year": "1998",
        "value": 9,
        "type": "Lon"
    },
    {
        "year": "1999",
        "value": 13,
        "type": "Lon"
    },
    {
        "year": "1991",
        "value": 3,
        "type": "Bor"
    },
    {
        "year": "1992",
        "value": 4,
        "type": "Bor"
    },
    {
        "year": "1993",
        "value": 3.5,
        "type": "Bor"
    },
    {
        "year": "1994",
        "value": 5,
        "type": "Bor"
    },
    {
        "year": "1995",
        "value": 4.9,
        "type": "Bor"
    },
    {
        "year": "1996",
        "value": 6,
        "type": "Bor"
    },
    {
        "year": "1997",
        "value": 7,
        "type": "Bor"
    },
    {
        "year": "1998",
        "value": 9,
        "type": "Bor"
    },
    {
        "year": "1999",
        "value": 13,
        "type": "Bor"
    }
]

Column = html.Div(
    fact.AntdColumn(
        data=column_demo_data,
        isStack=True,
        xField='year',
        yField='value',
        seriesField='type',
        label={
            'position': 'middle',
            # // 'top', 'bottom', 'middle'
            # // 可配置附加的布局方法
            'layout': [
                # // 柱形图数据标签位置自动调整
                {
                    'type': 'interval-adjust-position',
                },  # 数据标签防遮挡
                {
                    'type': 'interval-hide-overlap',
                },  # // 数据标签文颜色自动调整
                {
                    'type': 'adjust-color',
                },
            ],
        },
        # // 使用 annotation （图形标注）来展示：总数的 label
        annotations=[
            {
                'type': 'text',
                'position': [row.Index, row.value],
                'content': str(row.value),
                'offsetY': -10,
                'style': {
                    'textAlign': 'center'
                }
            }
            for row in
            pd
                .DataFrame(column_demo_data)
                .groupby('year')
                .agg({'value': 'sum'})
                .itertuples()
        ],
    )
)

app.layout = html.Div(
    html.Div(
        [
            html.H3("堆叠柱状图"),
            Column
        ],
    ),
    style={
        'padding': '50px'
    }
)

if __name__ == '__main__':
    app.run_server(debug=True, port=8008)
